/*
 * @Author: 余其方 448919239@qq.com
 * @Date: 2022-10-25 10:29:36
 * @LastEditors: 余其方 448919239@qq.com
 * @LastEditTime: 2022-10-25 10:34:05
 * @FilePath: /redux-demo/src/hooks/useWinSize.js
 * @Description:自定义Hooks函数获取窗口大小
 */
import React, { useState, useEffect, useCallback } from "react";

const useWinSize = () => {
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  });

  const onResize = useCallback(() => {
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
    });
  }, []);

  useEffect(() => {
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, [onResize]);

  return [size.width, size.height];
};

export default useWinSize;
